HTML - Text Links (Anchors)
The World Wide Web got its spidery name from the plentiful connections (links) that link websites together with the click of a button. What most people don't know is that HTML links are actually HTML anchors constructed using anchor tags (<a>).
HTML Text Link:
<a>I am a text link!</a>
HTML Text Link:
While the example above appears and feels like a text link when viewed through a web browser, the element is incomplete as it is missing a vital attribute that references another web page called a Hypertext Reference (href).
HTML - Hypertext Reference (href)
A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location. In other words, this Hypertext Reference is where users will navigate to if they do click on this link. Use the demonstration below as a reference.
HTML Text Link Code:
<a href="http://www.tizag.com/" target="_blank">Tizag Home</a>
<br />
<a href="http://www.espn.com/" target="_blank">ESPN Home</a>
<br />
<a href="http://www.yahoo.com/" target="_blank">Yahoo Home</a>
HTML Text Links:
The address of a website is called a Uniform Resource Locator (a URL), and it acts like a street address for a website as a user is directed from one site to another. There are different types of URLs, and each has a slightly different look. The examples above link to what are known as Global URLs, since they are external web addresses that do not reside on the Tizag.com domain. Here's a look at the different types of URLs.
HTML Text Link Code:
Global - href="http://www.cnn.com/" Links to other domains outside your website domain.
Local - href="../internal/mypage2.html" Links to other pages within your website domain.
Internal - href="#anchorname" Links to anchors embedded in the current web page.
HTML - Link Targets
The target attribute defines how each link will open when clicked. Will each one open in a new window, or will each one open in the current browser window? As the web designer, you call the shots as to how a user navigates from page to page, so long as you know how to handle the target attribute.
Link Targets:
| Target= | Description |
|---|
| _blank | Opens new page in a new browser window |
| _self | Loads the new page in the current window |
| _parent | Loads new page into a parent frame |
| _top | Loads new page into the current browser window,
cancelling all frames |
The two most important values are the top two, (target="_blank" and target="_self"). The _self value is generally the default. It loads each new page in the current browser window, while _blank opens up a new web browser window with each click of the text link.
The code below shows how you would link to ESPN.com, a popular sports website. The target attribute is added to allow the browser to open ESPN in a new window, so that the viewer can have a window that remains opened to our website. Here's the example.
HTML Link Target Code:
<a href="http://www.ESPN.com" target="_blank">ESPN.COM</a>
_blank Target:
Links are a big part of the user experience for any website. Always try to keep that in mind when working on a site's navigation. A web page that opens a new web browser window each time a user clicks a link is not the greatest way to entice users to stick around.
HTML - Email Links
Creating an email link is simple. If you want people to mail you about your site, a good way to do it is place an email link with a subject line already filled out for them.
HTML Email Link Code:
<a href="mailto:email@tizag.com?subject=Feedback" >Email@tizag.com</a>
Email Links:
In some circumstances, it may be necessary to fill in the body of the email for the user as well.
HTML Email Link Code:
<a href="mailto:email@tizag.com?subject=Feedback&body=Sweet site!">
Email@tizag.com</a>
Complete Email:
HTML - Download Links
Placing files available for download is done in exactly the same fashion as placing text links. However, things become complicated if we want to place image links for download. The best solution for images is to use a thumbnail links, which we will discuss in the next lesson.
HTML Download Link Code:
<a href="http://www.tizag.com/pics/htmlT/blanktext.zip">Text Document</a>
Download a Text Document:
HTML - Default Links; Base
Use the <base> tag in the head element to set a default URL for all links on a page to go to. It's always a good idea to set a base tag just in case your links become bugged somewhere down the line. Usually, you should set your base to your home page.
HTML Base Link Code:
<head>
<base href="http://www.tizag.com/" />
</head>
Found Something Wrong in this Lesson?Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time! | 
